import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeProgressProps {
    chartId?: string;
    width?: string;
    height?: string;
    thick?: number;
    min?: number;
    max?: number;
    splitNumber?: number;
    value?: number;
    unit?: string;
}

@customElement('lit-gauge-progress')
export class LitGaugeProgress extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-progress-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Number}) thick: number = 1;
    @property({type: Number}) min: number = 0;
    @property({type: Number}) max: number = 100;
    @property({type: Number}) splitNumber: number = 12;
    @property({type: Number}) value: number = 0;
    @property({type: String}) unit: string = '';

    getSeries(): any[] {
        const unit = this.unit ? this.unit : '';
        return [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: this.min,
                max: this.max,
                splitNumber: this.splitNumber,
                itemStyle: {
                    color: '#58D9F9',
                    shadowColor: 'rgba(0,138,255,0.45)',
                    shadowBlur: 10 * this.thick,
                    shadowOffsetX: 2 * this.thick,
                    shadowOffsetY: 2 * this.thick
                },
                progress: {
                    show: true,
                    roundCap: true,
                    width: 18 * this.thick
                },
                pointer: {
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '75%',
                    width: 16 * this.thick,
                    offsetCenter: [0, '5%']
                },
                axisLine: {
                    roundCap: true,
                    lineStyle: {
                        width: 18 * this.thick,
                    }
                },
                axisTick: {
                    splitNumber: 2,
                    lineStyle: {
                        width: 2 * this.thick,
                        color: '#999'
                    }
                },
                splitLine: {
                    length: 12 * this.thick,
                    lineStyle: {
                        width: 3 * this.thick,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: 30 * this.thick,
                    color: '#999',
                    fontSize: 20 * this.thick,
                },
                title: {
                    show: false
                },
                detail: {
                    backgroundColor: '#fff',
                    borderColor: '#999',
                    borderWidth: 2 * this.thick,
                    width: '60%',
                    lineHeight: 40 * this.thick,
                    height: 40 * this.thick,
                    borderRadius: 8,
                    offsetCenter: [0, '35%'],
                    valueAnimation: true,
                    formatter: function (value: any) {
                        return '{value|' + value.toFixed(0) + '}{unit|' + unit + '}';
                    },
                    rich: {
                        value: {
                            fontSize: 50 * this.thick,
                            fontWeight: 'bolder',
                            color: '#777'
                        },
                        unit: {
                            fontSize: 20 * this.thick,
                            color: '#999',
                            padding: [0, 0, -20, 10]
                        }
                    }
                },
                data: [
                    {
                        value: this.value,
                    }
                ]
            }
        ];
    }

    option: echarts.EChartsOption = {
        series: this.getSeries()
    };

    static styles = style;

    updated(): void {
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge-progress': LitGaugeProgress;
    }
}